<template>    
    <div v-if="showAlertBox" class="alert-box">  
      <p ref="alertText">{{ alertContent }}</p>  
    </div>   
  </template>  
    
  <script setup>  
  import { ref, onMounted, onUnmounted, nextTick } from 'vue';  
    
  // 初始化提示框的显示状态为隐藏  
  const showAlertBox = ref(false);  
    
  // 初始化提示框的文本内容  
  const alertContent = ref('请选择文本所在的位置');  
    
  // 创建一个 ref 来引用提示框中的文本元素  
  const alertText = ref(null);  
  // 控制提示框显示与隐藏的函数  
  const showAlert = async () => {  
    showAlertBox.value = true;  
    await nextTick(); // 等待 DOM 更新  
    // 显示提示框后，等待 3 秒  
    await new Promise(resolve => setTimeout(resolve, 3000));  
    // 隐藏提示框  
    showAlertBox.value = false;  
  };  

  defineExpose({
    alertContent,
    showAlert
  })
  </script>  
    
  <style scoped>  
  .container1 {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    height: 100vh;  
    margin: 0;  
    padding: 20px;  
    box-sizing: border-box;  
  }  
    
  .alert-box {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    padding: 20px;  
    background-color: rgba(0, 0, 0, 0.5); /* 50% 透明度的灰色 */  
    color: white; /* 白色文字 */  
    border-radius: 5px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    z-index: 100000; /* 确保提示框在其他内容之上 */  
  }  
  </style>